// index.js
import React, { useState, useCallback, useEffect } from 'react';
import ReactFlow, {
    MiniMap,    // 缩略图
    Controls,   // 画布缩放大小控制
    Background, // 背景组件
    applyNodeChanges,
    applyEdgeChanges,
    addEdge,
    useKeyPress
} from 'react-flow-renderer';
import { Button, message } from "antd";
import Sider from './components/Sider'  //侧边栏
import Graph from './components/Graph'  //画布
import Toolbar from './components/Toolbar'  //顶部工具栏
import './Process.scss'
export type ProductionFlowChartProps = {
    onNodesCallback: (a: any, b: any) => void;
    onNodeClickCallback: (object: objectStatment) => void;
}

type objectStatment = {
    id?: string | number;
    data?: {
        label: string | undefined;
    };
    position?: {
        x: number;
        y: number;
    };
    sourcePosition?: string;
    targetPosition?: string;
    connectable?: boolean;
}
const OverviewFlow: React.FC = () => {
    const enterPressed = useKeyPress('Enter');  //回车
    const [nodes, setNodes]: any = useState([
        {
            id: '1',
            type: 'input',
            data: { label: '默认' },
            position: { x: 250, y: 5 },
        }
    ]);
    const [reactFlowInstance, setReactFlowInstance] = useState(null);
    const [isRefresh, setIsRefresh] = useState(false);
    const [edges, setEdges] = useState([]);
    const [nodesData, setNodesData] = useState([])//节点数组
    const [edgesData, setEdgesData] = useState([])//边数组
    const [choosedData, setChoosedData] = useState<objectStatment>({})   //选中的节点信息
    useEffect(() => {
        console.log('enterPressed', enterPressed);
    }, [enterPressed]);
    const onLoad = (reactFlowInstance: any) => {
        console.log('flow loaded:', reactFlowInstance);
        reactFlowInstance.fitView();
    };
    const onNodesChange = useCallback(
        (changes: any) => {
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-ignore
            setNodes((nds) => applyNodeChanges(changes, nds))
        },
        [setNodes]
    );
    const onEdgesChange = useCallback(
        (changes: any) => {
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-ignore
            setEdges((eds) => applyEdgeChanges(changes, eds))
        },
        [setEdges]
    );
    //连接节点时触发
    const onConnect = useCallback(
        (connection: any) => {
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-ignore
            setEdges((eds) => addEdge(connection, eds))
        },
        [setEdges]
    );
    //删除节点
    const deleteNode = () => {
        console.log('del')

    }
    //点击节点
    const onNodeClick = (event: React.MouseEvent, node: objectStatment) => {
        // console.log("=====onNodeClick", event, node)
        // setNodes([
        //     ...nodes, {
        //         id: '2',
        //         type: 'input',
        //         data: { label: '默认2' },
        //         position: { x: 350, y: 5 },
        //     }
        // ])
    }
    const addNewFlow = (dataSource: any | undefined) => {
        console.log('add')
    }
    return (
        <ReactFlow
            nodes={nodes}
            onLoad={onLoad}
            onNodesChange={onNodesChange}
            onEdgesChange={onEdgesChange}
            onConnect={onConnect}
            onNodeClick={onNodeClick}
        >
            <Toolbar />
            <div>
                {/* 侧边栏，展示可拖拽的节点 */}
                <Sider />
                {/* 画布，处理核心逻辑 */}
                <Graph />
            </div>
            <Background color="#aaa" gap={16} />
        </ReactFlow>
    )
};

export default OverviewFlow;
